<template>
    <div class="music-list">
        <div class="show-list" >
                <List>
                <ListItem @dbclick="test" class="listCor">
                    <div class="list-item">歌曲</div>
                    <div class="list-item">歌手</div>
                    <div class="list-item">专辑</div>
                    <div class="list-item-controls" style="opacity: 0;"><span><Icon type="ios-play" /></span></div>
                    <!-- <div class="list-item">时长</div> -->
                    <!-- <ListItemMeta description="歌曲"/>
                    <template slot="action">
                        <li>歌手</li>
                        <li>专辑</li>
                        <li>时长</li>
                    </template> -->

                </ListItem>
                <ListItem 
                    v-for="(item,index) in musicListData" 
                    :key="index"
                    class="listCor">
                    <div @click="onClickListItem(item,item.songname,'songname')"  class="list-item">{{item.songname}}</div>
                    <div @click="onClickListItem(item,item.singer[0].name,'name')"  class="list-item">{{item.singer[0].name}}</div>
                    <div @click="onClickListItem(item,item.albumname,'albumname')"  class="list-item">{{item.albumname}}</div>
                    <!-- <div class="list-item-time">{{item.pubtime}}</div> -->
                    <div class="list-item-controls" @click="onClickListItem(item,index,'pubtime')"><span><Icon type="ios-play" /></span></div>
                    
                    <!-- <ListItemMeta :description="item.songname"/>
                    <template slot="action">
                        <li>
                            <span v-for="itemChild in item.singer" 
                            :key="itemChild.id"
                            >
                            {{itemChild.name}}
                            </span
                            ></li>
                        <li>{{item.albumname}}</li>
                        <li>00:28</li>
                    </template> -->
                </ListItem>
            </List>
            <div class="show-more" @click="showMore">查看更多</div>
        </div>
        <div class="song-mes">
            <div class="photo">
                <Card style="width:100%">
                    <div style="text-align:center">
                        <!-- <img style="width:100%" :src="songInformation.imgUrl"> -->
                        <!-- <img style="width:100%" :src="defaultImgFlag ? '../../../assets/717361.jpg' : songInformation.imgUrl"> -->
                        <img style="width:100%" v-if="defaultImgFlag" src="../../../assets/717361.jpg">
                        <img style="width:100%" v-else :src="songInformation.imgUrl">
                    </div>
                </Card>
                <p>在QQMusicApi所提供的接口中没有歌曲图片，用的在线api调用的图片，所以比较模糊</p>
            </div>
            <div class="lyric-contioner">
                <h1>{{songInformation.title}}</h1>
                <span v-for="item in songInformation.singer" :key="item.id">{{item.name}}</span>
                <div class="lyric">
                    <div class="lyrics" :style="transform">
                        <!-- :style="transform" -->
                        <li :class="[isCurLyric(index)]" v-for="(item,index) in lyricObj" :key="index">{{item.txt}}</li>
                    </div>
                </div>
            </div>

            <div class="main-message">
                <List>
                    <ListItem>
                        <ListItemMeta  :description="songInformation.intro" />
                    </ListItem>
                </List>
            </div>
        </div>
    </div>
</template>

<script>
import eventBus from '@/utils/bus'
import musicApi from "@/Apis/musicApis"
// import {mapState,mapMutations} from 'vuex'
export default {
    data() {
        return {
            musicListData:[],
            playMusicList:[],
            musicControl:{
                palyMusicId:''
            },
            songInformation:{
                intro:"",
                imgUrl:"",
                title:"",
                singer:[]
            },
            lyric: null,
            lyricObj: [],
            curIndex: 0,
            isFull: false,
            pageCount:1,
            firstSerch:true,
            defaultImgFlag:false
            // "../../../assets/717361.jpg"
        }
    },
    methods: {
       //搜索歌曲
        getSerchSong(value) {
            musicApi
                .searchMusic({
                    key: value,
                    pageNo:this.pageCount
                }).then(res => {
                    this.musicListData =  this.musicListData.concat(res.data.data.list)
                    eventBus.$emit('sendPlayMusicList', this.musicListData)
                    if(this.firstSerch){
                        this.musicControl.palyMusicId = res.data.data.list[0].songmid
                        this.songInformation.title = res.data.data.list[0].songname
                        this.songInformation.singer = res.data.data.list[0].singer
                        this.songInformation.imgUrl = 'http://y.gtimg.cn/music/photo_new/T002R180x180M000' + res.data.data.list[0].albummid +'.jpg'
                        // console.log(this.songInformation.imgUrl,"imgurl");
                        this.getSongInformation(this.musicListData[0].songmid)
                        this.getlyricApi(res.data.data.list[0].songmid)
                    }
                })
        },
        // 获取专辑信息
        getAlbum(id){
            musicApi
            .getAlbum({
                albummid:id
            }).then(res =>{
                console.log(res,"album");
            })
        },
        //点击信息
        onClickListItem(v1,v2,v3){
            console.log(v1,v2,v3);
            this.musicControl.palyMusicId = v1.songmid
            this.songInformation.title = v1.songname
            this.songInformation.singer = v1.singer

            if(v1.albummid == "" || v1.albummid == undefined) 
            this.defaultImgFlag = true
            else{
                this.songInformation.imgUrl = 'http://y.gtimg.cn/music/photo_new/T002R180x180M000' + v1.albummid +'.jpg'
                this.defaultImgFlag = false
            }
            this.lyricObj = []
            if(v3 == "pubtime")
            this.palyMusic()
            this.getlyricApi(v1.songmid)
            this.getAlbum(v1.albummid)
            eventBus.$emit('songTitleAndSinger',this.songInformation)
            eventBus.$emit('songPlayIndex',v2)
        },
        // 获取播放音乐地址
        palyMusic(){
            musicApi
                .palyMusicApi({
                    id:this.musicControl.palyMusicId
                }).then(res =>{
                    eventBus.$emit('musicUrl',res.data.data)
                    // console.log(res);
                })
        },
        // 获取单个音乐信息
        getSongInformation(v){
            musicApi
            .songInformation({
                songmid:v
            }).then(res =>{
                // console.log(res,222);
                this.songInformation.intro = res.data.data.info.intro.content[0].value
            })
        },
        //获取歌词
        getlyricApi(v){
            musicApi
            .getLyric({
                songmid: v,
            }).then(res =>{
                this.lyric = res.data.data.lyric
                this.formartLyric(res.data.data.lyric)
            }) 
        },
        //显示更多
        showMore(){
            this.pageCount++
            this.firstSerch = false
            this.getSerchSong(this.$route.params.keyword)
        },
        //无限滚动--iview给的有一个很丑的滚动条 所以不用
        // handleReachBottom(){
        //     return new Promise(resolve => {
        //             setTimeout(() => {
        //                 this.pageCount++
        //                 this.getSerchSong(this.$route.params.keyword)
        //                 resolve();
        //             }, 2000);
        //         });
        // },
        formartLyric(lrc){
            const lrcReg = /^\[(\d{2}):(\d{2}.\d{2,})\]\s*(.+)$/
            if (!lrc) {
                this.lyric = true
                return
            }
            const lyricLis = lrc.split('\n')
            this.lyric = lrc.lyric
            lyricLis.forEach(item => {
                const arr = lrcReg.exec(item)

                if (!arr) {
                    return
                }
                this.lyricObj.push({ t: arr[1] * 60 * 1 + arr[2] * 1, txt: arr[3] })
            })
            // 根据时间轴重排顺序
            this.lyricObj.sort((a, b) => {
                return a.t - b.t
            })
            // console.log(this.lyric,this.lyricObj,"formartLyric");
        },
        findCurIndex (t) {
            for (let i = 0; i < this.lyricObj.length; i++) {
                if (t <= this.lyricObj[i].t) {
                    return i
                }
            }
            // console.log(this.lyricObj.length);
            return this.lyricObj.length
        },
        //测试函数
        test(){
            console.log("test");
        }

    },
    watch: {
        nowCurrentTime(newTime){
            // 无歌词的时候 不做动画滚动
            if (!this.lyricObj.length) {
                return
            }
            this.curIndex = this.findCurIndex(newTime) - 1
        }
    },
    
    mounted() {

    },
    created() {
    //    console.log(this.$route.params);
       this.getSerchSong(this.$route.params.keyword)
        // console.log(this.timestampToTime());
    },
    // 监听属性 类似于data概念
    computed: {
        isCurLyric () {
            return (index) => {
                return index === this.curIndex ? 'active' : ''
            }
        },
        // 歌词实时滚动
        transform () {
            if (this.curIndex > 3) {
                return `transform: translateY(-${21 * (this.curIndex - 3)}px)`
            } else {
                return 'transform: translateY(0)'
            }
        },
        //当前播放时间
        nowCurrentTime(){
            return this.$store.state.currentTime
        },
    },
}
</script>

<style scoped>
@media screen and (max-width:1520px){
    .song-mes{display: none;}
    .show-list{width: 100%;}
    }
.music-list{
    display: flex;
}
.show-list{
    width: 50%;
    min-width:400px;
    margin-left: 10vw;
}
.song-mes{
    width: 400px;
    position: fixed;
    top: 100px;
    right: 100px;
}
.lyric-contioner{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 210px;
    margin-top: 20px;
}
.lyric{
    width: 100%;
    /* transition: all 1.5s ease-in-out; */
    overflow-y: auto;
    text-align: center;
}
.lyric::-webkit-scrollbar{
    width: 0px;
}
.lyric::-webkit-scrollbar-thumb {
    background: #343a40; 
    border-radius: 5px; 
}
.lyric::-webkit-scrollbar-track {
    background-color: #ddd
}
li{
    list-style: none;
    width: 100%;
}
.main-message{
    margin-top: 20px;
    padding: 0 20px;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}

.listCor{
    display: flex;
    justify-content:space-around;
}
.list-item,.list-item-time{
    width: 33%;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
    cursor: pointer;
}
.list-item:hover{
    color: rgb(93, 142, 187);
}
.ivu-list-items{
    background: white;
}

.list-item-controls{
    width: 80px;
    cursor: pointer;
    opacity: 0;
}
.listCor:hover .list-item-controls{
    opacity: 1;
}
.active{
    color: rgb(93, 142, 187);
}

.ivu-icon{
    font-size: 22px;
    color: #808080;
}

.lyrics {
    /* transform: translateY(0); */
    transition: transform 1.5s ease-in-out;
}
.show-more{
    width: 100%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 5px;
    background: #eee;
    cursor: pointer;
    color: #808080;
}
.show-more:hover{
    color: rgb(93, 142, 187);
}
.photo{
    text-align: center;
}
</style>